<template>
  <div class="index" @scroll="handleScroll($event)">
    <UserHeader :userInfo="userInfo" />
    <div class="lists">
      <!-- <van-tabs v-model="dataValue.goodsTypeCode" background="transparent" @change="change">
        <van-tab title="" name=""> -->
      <van-list
        v-model="moreLoading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="onLoad"
      >
        <ItemLists :itemLists="allDataLists" />
      </van-list>
      <!-- </van-tab> -->
      <van-tab
        v-for="item in cateTypeList"
        :title="item.text"
        :name="item.id"
        :key="item.id"
      >
        <van-list
          v-model="moreGoodsLoading"
          :finished="finishedGoods"
          finished-text="没有更多了"
          offset="100"
          @load="onLoadGoods"
        >
          <ItemLists :itemLists="dataList" />
        </van-list>
      </van-tab>
      <!-- </van-tabs> -->
    </div>
  </div>
</template>

<script>
import UserHeader from "./components/header";
import ItemLists from "./components/itemList";
export default {
  name: "indexHome",
  components: {
    UserHeader,
    ItemLists,
  },
  data() {
    return {
      active: "",
      isPages: false,
      isLoading: false,
      moreLoading: false, // 全部
      finished: false,
      moreGoodsLoading: false,
      finishedGoods: false,
      allDataLists: [],
      dataList: [],
      dataValue: {
        first: 0,
        limit: 10,
        goodsTypeCode: "",
      },
      cateTypeList: [],
      userInfo: {},
    };
  },
  beforeCreate() {
    if (this.$route.query.token) {
      this.$utils.SessionSet("token", this.$route.query.token);
    } else {
      this.$toast("登录已经过期，请重新登录!");
      this.$utils.SessionSet("token", '')
    }
  },
  watch:{
    
  },
  created() {
    console.log(this.scrollTopVal);
  },
  mounted() {
    this.$utils.SessionSet("token", this.$route.query.token);
    if (!this.$route.query.token) {
      this.finished = true;
    } else {
      this.getShopIndex();
      this.onLoad('rm');
    }
    window.addEventListener('scroll', this.handleScroll, true);
  },
  methods: {
    change(name) {
      this.dataValue.goodsTypeCode = name;
      if (name === "") {
        this.getData();
        this.allDataLists = [];
        this.finished = false;
        this.onLoad("refresh");
      } else {
        this.getGoodsPageList();
        this.dataList = [];
        this.finishedGoods = false;
        this.onLoadGoods("refresh");
      }
      this.dataValue.first = 0;
    },
    getShopIndex() {
      this.$http.get("/api/shop/getUserPointsInfo").then((res) => {
        this.userInfo = res.data;
        this.$utils.SessionSet("userInfo", this.userInfo);
      });
    },
    // getShopGoodsType(){
    //   this.$http.get("/api/shop/goodsType").then((res) => {
    //     this.cateTypeList = res.data;
    //   });
    // },
    getData(mode) {
      this.$http.post("/api/shop/goods/query", this.dataValue).then((res) => {
        if (res.code == "0") {
          if (mode == "more") {
            if(mode == "rm"){
              this.allDataLists = []
              this.dataValue.first = 0
            }
            this.allDataLists = [...this.allDataLists, ...res.data];
          }else{
            this.allDataLists = res.data;
          }
          if (
            (this.allDataLists && !this.allDataLists.length) ||
            !res.data.length
          ) {
            this.finished = true;
            this.isPages = true;
          }
        }
        setTimeout(() => {
          this.isLoading = false;
          this.moreLoading = false;
        }, 500);
      });
    },
    onLoad(mode = "more") {
      if (this.isPages) {
        return (this.finished = true);
      }
      this.dataValue.first++;
      this.getData(mode);
    },
    getGoodsPageList(mode) {
      // ?limit=${Number(this.dataValue.limit)}&first=${this.dataValue.first}&goodsTypeCode=${this.dataValue.goodsTypeCode}
      this.$http.post(`/api/shop/goods/query`, this.dataValue).then((res) => {
        if (res.code == "0") {
          if (mode == "more") {
            this.dataList = [...this.dataList, ...res.data];
          } else {
            this.dataList = res.data;
          }
          if ((this.dataList && !this.dataList.length) || !res.data.length) {
            this.finishedGoods = true;
            this.isPages = true;
          }
        }
        setTimeout(() => {
          this.isLoading = false;
          this.moreGoodsLoading = false;
        }, 500);
      });
    },
    onLoadGoods(mode = "more") {
      if (this.isPages) {
        return (this.finishedGoods = true);
      }
      this.dataValue.first++;
      this.getGoodsPageList(mode);
    },
  },
  //在页面离开时记录滚动位置
  beforeRouteLeave (to, from, next) {
    this.scrollTopVal = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
  //进入该页面时，用之前保存的滚动位置赋值
  beforeRouteEnter (to, from, next) {
    next(vm => {
      setTimeout(() => {
        document.body.scrollTop = vm.scrollTopVal
        document.documentElement.scrollTop = vm.scrollTopVal
      }, 50);
    })
  },


};
</script>

<style scoped lang="less">
.lists {
  padding-top: 10px;
}
</style>
